<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.directive</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Extends Optin Demo</h1>
<hr>
<div id="app">
    {{message}}
    <p>{{num}}</p>
    <button onclick="ton()">外部方法</button>
    <button onclick="tononce()">外部方法tononce</button>
    <button onclick="off()">外部方法off</button>

</div>
<script type="text/javascript">

    var app=new Vue({
        el:'#app',
        data:{
            message:'hello Vue!',
            num:1
        }
    })
    app.$on("ton",function () {
      this.num++;
    })
    app.$once("tononce",function () {
        this.num++;
    })

    //外部调用内部事件
    function ton(){
        app.$emit('ton');
    }
    //外部调用内部事件
    function tononce(){
        app.$emit('tononce');
    }

    //关闭事件
    function off(){
        app.$off('ton');
    }

</script>
</body>
</html>
</html>